<template>
  <div class="map-top-box">
    <div class="floor-box"
         v-if="list&&list.length>1">
      <div>
        <div class="floor-item-root"
             v-for="item  in list"
             :key="item"
             @click="selectFloorFun(item,true)">
          <div class="floor-item"
               :class="{'select-floor':item==selectFloor}">
            {{item}}
          </div>
          <div v-show="clickFlag&&item==selectFloor">
            <img style="width:20px"
                 src="@/assets/images/lock.png" />
          </div>
        </div>
      </div>
    </div>
    <div class="map-info-content">
      <div class="title">
        <div class="left">
          <div class="point">
            <point-err></point-err>
            <span class="device-tip">预警</span>
            <span class="device-num"> {{warningNum}}</span>
          </div>
          <div class="point">
            <point-no-err></point-no-err>
            <span class="device-tip">无预警</span>
            <span class="device-num"> {{deviceNum}}</span>
          </div>
          <!--<div class="point">
            <point-offline></point-offline>
            <span>离线</span>
          </div>-->
        </div>
        <div class="right">
          <div class="flex">
            <img src="@/assets/images/warnView/device/online.png" />
            <span class="device-tip">在线设备</span>
            <span class="device-num">{{onlineNum}}</span>
          </div>
          <div class="flex">
            <img src="@/assets/images/warnView/device/offline.png" />
            <span class="device-tip">离线设备</span>
            <span class="device-num">{{offlineNum}}</span>
          </div>
        </div>
      </div>
      <hospital :allDeviceData="allDeviceData"
                :deviceId="deviceId"
                :pointList="pointList"
                @warningNumFun="warningNumFun"
                @deviceNumFun="deviceNumFun"
                @selectFloor="selectFloor"
                @selectLocationIdFun="selectLocationIdFun"
                :selectFloor="selectFloor"></hospital>
    </div>
  </div>
</template>
<script>
import pointErr from "./components/pointErr";
import pointNoErr from "./components/pointNoErr";
import pointOffline from "./components/pointOffline";
import hospital from "./components/hospital";
import { getStatus } from "@/api/platformManage";
import { PointList } from "@/utils/opt1List"
export default {
  components: {
    hospital,
    pointErr,
    pointOffline,
    pointNoErr
  },
  name: "MapInfo",
  props: {
    msg: String,
    deviceId: String,
    allDeviceData: Array,
    platformId: String
  },

  watch: {
    platformId(val) {
      getStatus(val).then(res => {
        let data = res.value;
        this.onlineNum = data.online;
        this.offlineNum = data.offline;
      });
    },
    allDeviceData(data) {
      this.warningNum = data.filter(e => {        if (e.alert && e.state == "ONLINE") {
          return e;
        }      }).length;
      this.deviceNum = data.filter(e => {        if (!e.alert && e.state == "ONLINE") {
          return e;
        }      }).length;
      if (this.list && this.list.length > 0) {
        this.selectFloorFun(this.list[0]);
      }
    },

    pointList: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        for (let i = 0; i < this.allDeviceData.length; i++) {
          const alertEl = this.allDeviceData[i];
          for (let j = 0; j < this.pointList.length; j++) {
            const pointEl = this.pointList[j];
            if (alertEl.deviceId == pointEl.id) {
              this.pointList[j].alert = alertEl.alert;
              this.pointList[j].state = alertEl.state;
              if (alertEl.state == "ONLINE") {
              }
            }
          }
        }
      }
    },
  },
  mounted() {
  },

  unmounted() {
    clearInterval(this.timer);
  },
  data() {
    return {
      list: ["F4"],
      warningNum: 0,
      deviceNum: 0,
      current: {},
      onlineNum: 0,
      offlineNum: 0,
      selectFloor: "F4",
      selectDeviceIndex: 0,
      pointList: [],
      onlineList: [],
      timer: null,
      clickFlag: false
    };
  },
  methods: {
    // selectFloor(){
    //      this.pointList =  PointList[newVal];
    // },
    warningNumFun(number) {
      this.warningNum = number;
    },
    deviceNumFun(number) {
      this.deviceNum = number;
    },
    selectLocationIdFun(item) {
      this.$emit("selectLocationIdFun", item);
    },
    selectFloorFun(floor, click = false) {
      //如果点击的楼层跟当前楼层是同一个 则取反
      if (click && floor == this.selectFloor) {
        this.clickFlag = !this.clickFlag;
      }
      //点击的不是同一楼层 则锁定
      if (click && floor != this.selectFloor) {
        this.clickFlag = true;
      }
      this.selectFloor = floor;
      this.pointList = PointList[this.selectFloor];
      setTimeout(() => {
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.selectDeviceIndex = 0;
        this.onlineList = this.pointList.filter(e => {
          if (e.state == "ONLINE") {
            return e;
          }
        })
        if (this.onlineList.length > 0) {
          this.selectDeviceIndex = 0;
          this.selectLocationIdFun(this.onlineList[this.selectDeviceIndex]);
          this.timer = setInterval(() => {
            if (this.selectDeviceIndex < this.onlineList.length - 1) {
              this.selectDeviceIndex++;
              this.selectLocationIdFun(this.onlineList[this.selectDeviceIndex])
            } else {
              if (this.clickFlag) {
                //如果点击了楼层  不轮播楼层只轮播设备
                this.selectDeviceIndex = 0;
                this.selectLocationIdFun(this.onlineList[this.selectDeviceIndex])
              } else {
                let index = this.list.indexOf(floor);
                if (index < this.list.length - 1) {
                  this.selectFloorFun(this.list[index + 1]);
                } else {
                  this.selectFloorFun(this.list[0]);
                }
              }
            }
          }, 1000 * 10);
        } else {
          if (!this.clickFlag) {
            var index = this.list.indexOf(floor);
            if (index < this.list.length - 1) {
              this.selectFloorFun(this.list[index + 1]);
            } else {
              this.selectFloorFun(this.list[0]);
            }
          }
          return;
        }

      }, 10)


    }
  }
};
</script>
<style scoped lang="scss">
.map-top-box {
  border-radius: 12px;
  background-color: #fff;
  padding: 20px;
  height: 496px;
  display: flex;
  justify-content: flex-start;
  .floor-box {
    width: 52px;
    padding-right: 10px;
    margin-top: 50px;
    .floor-item-root {
      display: flex;
      justify-content: start;
      width: 52px;
    }
    .floor-item {
      cursor: pointer;
      width: 32px;
      margin-bottom: 10px;
      background: rgba(128, 127, 127, 0.39);
      border-radius: 0px 12px 12px 0px;
      text-align: center;
      color: #fff;
    }
    .select-floor {
      background: rgba(255, 166, 0, 0.39);
    }
    .active {
      background-color: #393b3f;
    }
  }
  .map-info-content {
    flex: 1;
    .title {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 400;
      line-height: 19px;
      color: #292929;
      .left {
        .point {
          font-size: 16px;
          font-weight: 600;
          line-height: 27px;
          margin-right: 20px;
          :first-child {
            margin-right: 5px;
          }
          display: flex;
          align-items: center;
        }
        display: flex;
        justify-content: flex-start;
      }
      .device-tip {
        font-size: 16px;
        font-weight: 600;
        line-height: 27px;
        color: #0a0a0a;
        margin-right: 5px;
      }
      .device-num {
        font-size: 20px;
        font-weight: 600;
        line-height: 27px;
        color: #0a0a0a;
      }
      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        > :first-child {
          margin-right: 30px;
        }
        .flex {
          display: flex;
          align-items: center;
          img {
            margin-right: 10px;
            width: 25px;
          }
        }
      }
    }
  }
}
</style>
